<script setup lang="ts">
</script>

<template>
  <div class="root">
    <nav class="app-nav">
      <router-link to="/Home">主页</router-link>
      <router-link to="/About">关于我</router-link>
    </nav>
    <div class="showLink">
      <router-view></router-view>
    </div>
  </div>
</template>
<style>
#app {
}

.root {
  width: 80%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  margin: 0 auto;
  height: 100vh;
}
.app-nav {
  display: flex;
  width: 75vw;
  height: auto;
  display: flex;
  margin: 0 auto;
}
.app-nav > * {
  margin: 25px;
}
.showLink {
}
@media screen and (max-width:1200px)  {
  .root {
    width: 100%;
  }
}
</style>
